<template>
  <div class="container">
    <div class="box box1">
      <div class="item">
        <div class="left">
          <div class="one">本日检测（批次）</div>
          <div v-if="data.brjcl" class="two">检测量 {{ data.brjcl }}</div>
          <div v-if="data.bryxs" class="two">阳性量 {{ data.bryxs }}</div>
        </div>
        <div class="right">
          <div id="four1"></div>
        </div>
      </div>
      <div class="item middle">
        <div class="left">
          <div class="one">本年检测（批次）</div>
          <div v-if="data.bnjcl" class="two">本年检测 {{ data.bnjcl }}</div>
          <div v-if="data.bnhgs" class="two">合格数 {{ data.bnhgs }}</div>
        </div>
        <div class="right">
          <div id="four2"></div>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <div class="one">本年阳性处理（批次）</div>
          <div v-if="data.bnyxzs" class="two">
            疑似阳性总数 {{ data.bnyxzs }}
          </div>
          <div v-if="data.bnycls" class="two">已处理数 {{ data.bnycls }}</div>
        </div>
        <div class="right">
          <div id="four3"></div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="item">
        <div class="left">
          <div class="one">商户覆盖率</div>
          <div v-if="data.peopleSum" class="two">
            总商户数 {{ data.peopleSum }}
          </div>
          <div v-if="data.fugaiSUm" class="two">
            已覆盖数 {{ data.fugaiSUm }}
          </div>
        </div>
        <div class="right">
          <div id="four4"></div>
        </div>
      </div>
      <div class="item middle">
        <div class="left">
          <div class="one">单日交易</div>
          <div class="two">交易笔数 {{ data.drjyBSum }}笔</div>
          <div class="two">交易数量 {{ data.drjySum }}</div>
        </div>
        <div class="right five">
          <span>{{ data.drjye }}万元</span>
          <span>交易金额</span>
        </div>
      </div>
      <div class="item middle bottom">
        <div class="left">
          <div class="one">总交易量</div>
          <div class="two">交易笔数 {{ data.alljyBSum }}笔</div>
          <div class="two">交易总额 {{ data.alljye }}万元</div>
        </div>
        <div class="right five">
          <span>{{ data.alljySum }}kg</span>
          <span>交易数量</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getJCXMFX, getSYTJByMarketATy } from "../../util/home";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      data: {},
      data: {},
      data: {},
      data3: {},
      data: {},
      data5: {},
      data6: {},
      option1: {},
      option2: {},
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getInit();
  },
  methods: {
    async getInit() {
      await getSYTJByMarketATy().then((res) => {
        this.data = res.data.data[0];
        const rate1 = (this.data.brhgl * 100) / 100;
        const rate2 = (this.data.bnhgl * 100) / 100;
        const rate3 = (this.data.bnclv * 100) / 100;
        const rate4 = Math.round(this.data.fugailv * 100) / 100;
        this.option1 = {
          // title: [
          //   {
          //     text: rate1 + '%',
          //     show: true,
          //     x: "25%",
          //     y: "20%",
          //     textStyle: {
          //       fontSize: 15,
          //       color: "#fff",
          //       rich: {
          //         a: {
          //           fontSize: 12,
          //           color: "#FFFFFF",
          //           // fontWeight: "bold",
          //         },
          //       },
          //     },
          //   },
          //   {
          //     text: '合格率',
          //     x: "34%",
          //     y: "center",
          //     borderColor: "#fff",
          //     textStyle: {
          //       fontWeight: "normal",
          //       fontSize: 8,
          //       color: "#fff",
          //     },
          //   },
          // ],
          title: {
            text: rate1 + "%",
            x: "center",
            y: "30%",
            textStyle: {
              fontWeight: "normal",
              color: "#fff",
              fontSize: "14",
            },
            itemGap: 5,
            subtext: "合格率",
            subtextStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
          polar: {
            center: ["center", "center"],
            radius: ["70%", "85%"],
          },
          angleAxis: {
            max: 100,
            show: false,
          },
          radiusAxis: {
            type: "category",
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          series: [
            {
              data: [this.data.brhgl],
              name: "",
              type: "bar",
              roundCap: true,
              showBackground: true,
              backgroundStyle: {
                color: "rgba(19, 84, 146, .4)",
              },
              coordinateSystem: "polar",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "#005DCF",
                    },
                    {
                      offset: 1,
                      color: "#1AED83",
                    },
                  ]),
                },
              },
            },
          ],
        };
        this.option2 = {
          title: {
            text: rate2 + "%",
            x: "center",
            y: "30%",
            textStyle: {
              fontWeight: "normal",
              color: "#fff",
              fontSize: "13",
            },
            itemGap: 5,
            subtext: "合格率",
            subtextStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
          polar: {
            center: ["center", "center"],
            radius: ["70%", "85%"],
          },
          angleAxis: {
            max: 100,
            show: false,
          },
          radiusAxis: {
            type: "category",
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          series: [
            {
              data: [this.data.bnhgl * 1],
              name: "",
              type: "bar",
              roundCap: true,
              showBackground: true,
              backgroundStyle: {
                color: "rgba(19, 84, 146, .4)",
              },
              coordinateSystem: "polar",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "#005DCF",
                    },
                    {
                      offset: 1,
                      color: "#1AED83",
                    },
                  ]),
                },
              },
            },
          ],
        };
        this.option3 = {
          title: {
            text: rate3 + "%",
            x: "center",
            y: "30%",
            textStyle: {
              fontWeight: "normal",
              color: "#fff",
              fontSize: "14",
            },
            itemGap: 5,
            subtext: "处理率",
            subtextStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
          polar: {
            center: ["center", "center"],
            radius: ["70%", "85%"],
          },
          angleAxis: {
            max: 100,
            show: false,
          },
          radiusAxis: {
            type: "category",
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          series: [
            {
              data: [this.data.bnclv * 1],
              name: "",
              type: "bar",
              roundCap: true,
              showBackground: true,
              backgroundStyle: {
                color: "rgba(19, 84, 146, .4)",
              },
              coordinateSystem: "polar",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "#005DCF",
                    },
                    {
                      offset: 1,
                      color: "#1AED83",
                    },
                  ]),
                },
              },
            },
          ],
        };
        this.option4 = {
          title: {
            text: rate4 + "%",
            x: "center",
            y: "30%",
            textStyle: {
              fontWeight: "normal",
              color: "#fff",
              fontSize: "14",
            },
            itemGap: 5,
            subtext: "覆盖率",
            subtextStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
          polar: {
            center: ["center", "center"],
            radius: ["70%", "85%"],
          },
          angleAxis: {
            max: 100,
            show: false,
          },
          radiusAxis: {
            type: "category",
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          series: [
            {
              data: [this.data.fugailv],
              name: "",
              type: "bar",
              roundCap: true,
              showBackground: true,
              backgroundStyle: {
                color: "rgba(19, 84, 146, .4)",
              },
              coordinateSystem: "polar",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "#005DCF",
                    },
                    {
                      offset: 1,
                      color: "#1AED83",
                    },
                  ]),
                },
              },
            },
          ],
        };
      });
      var myChart = echarts.init(document.getElementById("four1"), null, {
        devicePixelRatio: 2.5,
      });
      var myChart2 = echarts.init(document.getElementById("four2"), null, {
        devicePixelRatio: 2.5,
      });
      var myChart3 = echarts.init(document.getElementById("four3"), null, {
        devicePixelRatio: 2.5,
      });
      var myChart4 = echarts.init(document.getElementById("four4"), null, {
        devicePixelRatio: 2.5,
      });
      myChart.setOption(this.option1);
      myChart2.setOption(this.option2);
      myChart3.setOption(this.option3);
      myChart4.setOption(this.option4);
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;

  .box {
    height: 50%;
    display: flex;

    .item {
      height: 100%;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      .left {
        padding: 0 10px;
        font-size: 10px;
        width: 75%;
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .one {
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #1eeeff;
        }

        .two {
          color: #fff;
        }
      }

      .right {
        width: 60%;
        height: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        // position: relative;

        div {
          width: 100%;
          height: 100%;
          // position: absolute;
          // right: 10%;
          // top: 50%;

          .name {
            position: absolute;
            top: 20%;
            left: 9%;
            color: #fff;
            width: 100%;
            font-size: 13px;
          }
        }
      }
    }
  }

  .five {
    font-size: 12px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url("../../assets/img/组\ 6540@2x.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 84%;
  }

  .box1 {
    border-bottom: 1px dashed #385bed;
  }

  .middle {
    border-right: 1px dashed #385bed;
    border-left: 1px dashed #385bed;
  }

  .bottom {
    border: none;
  }
}
</style>
<style>
.el-progress--circle .el-progress__text,
.el-progress--dashboard .el-progress__text {
  color: #fff !important;
  font-size: 15px !important;
  margin-left: -2px;
  margin-top: -1px;
}
</style>
